<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原子习惯 - 习惯详情</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <div class="status-bar">
      <div class="time">9:41</div>
      <div class="icons">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
      </div>
    </div>
    
    <div class="nav-bar">
      <div class="back" data-nav="dashboard.html">
        <i class="fas fa-chevron-left"></i> 返回
      </div>
      <div class="title">晨间冥想</div>
      <div class="action" data-nav="edit-habit.html">
        <i class="fas fa-edit"></i>
      </div>
    </div>
    
    <div class="screen-container">
      <!-- Habit Summary -->
      <div class="card">
        <div class="flex flex-between mb-10">
          <h3>晨间冥想</h3>
          <div class="badge badge-success">已完成</div>
        </div>
        
        <div class="flex flex-between mb-10">
          <div>
            <i class="fas fa-calendar-alt text-primary"></i> 每天
          </div>
          <div>
            <i class="fas fa-clock text-primary"></i> 10分钟
          </div>
          <div class="streak">
            <i class="fas fa-fire"></i> 连续21天
          </div>
        </div>
        
        <div>
          <p class="mb-10"><strong>目标：</strong>每天早上起床后进行10分钟冥想，培养专注力和正念。</p>
          <div class="text-secondary">
            <p>提示：起床后刷牙前完成</p>
            <p>奖励：完成后喝一杯喜欢的茶</p>
          </div>
        </div>
      </div>
      
      <!-- Progress Calendar -->
      <div class="card">
        <h3>本月完成情况</h3>
        <div class="calendar">
          <div class="calendar-day completed">1</div>
          <div class="calendar-day completed">2</div>
          <div class="calendar-day completed">3</div>
          <div class="calendar-day completed">4</div>
          <div class="calendar-day completed">5</div>
          <div class="calendar-day completed">6</div>
          <div class="calendar-day completed">7</div>
          <div class="calendar-day missed">8</div>
          <div class="calendar-day completed">9</div>
          <div class="calendar-day completed">10</div>
          <div class="calendar-day completed">11</div>
          <div class="calendar-day completed">12</div>
          <div class="calendar-day completed">13</div>
          <div class="calendar-day completed">14</div>
          <div class="calendar-day completed">15</div>
          <div class="calendar-day completed">16</div>
          <div class="calendar-day completed">17</div>
          <div class="calendar-day missed">18</div>
          <div class="calendar-day completed">19</div>
          <div class="calendar-day completed">20</div>
          <div class="calendar-day completed">21</div>
          <div class="calendar-day completed">22</div>
          <div class="calendar-day completed">23</div>
          <div class="calendar-day completed">24</div>
          <div class="calendar-day completed">25</div>
          <div class="calendar-day completed">26</div>
          <div class="calendar-day completed">27</div>
          <div class="calendar-day completed">28</div>
          <div class="calendar-day future">29</div>
          <div class="calendar-day future">30</div>
          <div class="calendar-day future">31</div>
        </div>
        
        <div class="flex flex-between mt-10">
          <div><i class="fas fa-circle text-success"></i> 已完成</div>
          <div><i class="fas fa-circle text-danger"></i> 未完成</div>
          <div><i class="fas fa-circle text-secondary"></i> 未来</div>
        </div>
      </div>
      
      <!-- Stats -->
      <div class="card">
        <h3>习惯统计</h3>
        <div class="flex flex-between">
          <div class="text-center">
            <h2>93%</h2>
            <p>完成率</p>
          </div>
          <div class="text-center">
            <h2>21</h2>
            <p>当前连续</p>
          </div>
          <div class="text-center">
            <h2>30</h2>
            <p>最长连续</p>
          </div>
        </div>
      </div>
      
      <!-- Reflection -->
      <div class="card">
        <h3>习惯反思</h3>
        <div class="form-group">
          <label class="form-label">今日感受</label>
          <textarea class="form-control" rows="3" placeholder="记录今天冥想的感受..."></textarea>
        </div>
        <button class="btn btn-primary">保存</button>
      </div>
      
      <!-- Four Laws (from Atomic Habits) -->
      <div class="card">
        <h3>习惯法则分析</h3>
        
        <div class="list-item">
          <div>
            <strong>让它显而易见</strong>
            <p class="text-secondary">起床后立即在冥想垫上坐下</p>
          </div>
          <div class="badge badge-success">优</div>
        </div>
        
        <div class="list-item">
          <div>
            <strong>让它有吸引力</strong>
            <p class="text-secondary">完成后享用美味的早餐</p>
          </div>
          <div class="badge badge-success">优</div>
        </div>
        
        <div class="list-item">
          <div>
            <strong>让它容易做到</strong>
            <p class="text-secondary">提前设置冥想垫和手机</p>
          </div>
          <div class="badge badge-primary">良</div>
        </div>
        
        <div class="list-item">
          <div>
            <strong>让它令人满足</strong>
            <p class="text-secondary">冥想后给自己一杯好茶作为奖励</p>
          </div>
          <div class="badge badge-primary">良</div>
        </div>
      </div>
      
      <!-- Reminder Settings -->
      <div class="card">
        <div class="flex flex-between">
          <h3>提醒设置</h3>
          <a href="reminder.html" class="text-primary">编辑</a>
        </div>
        
        <div class="list-item">
          <div>
            <strong>每日提醒</strong>
            <p class="text-secondary">每天 06:30</p>
          </div>
          <label class="switch">
            <input type="checkbox" checked>
            <span class="slider"></span>
          </label>
        </div>
      </div>
      
      <!-- Buttons -->
      <div class="mt-20 flex gap-10">
        <button class="btn btn-danger flex-1">
          <i class="fas fa-trash"></i> 删除习惯
        </button>
        <button class="btn btn-primary flex-1">
          <i class="fas fa-share-alt"></i> 分享进度
        </button>
      </div>
    </div>
    
    <!-- Tab Bar -->
    <div class="tab-bar">
      <div class="tab-item active" data-nav="dashboard.html">
        <i class="fas fa-home"></i>
        <span>首页</span>
      </div>
      <div class="tab-item" data-nav="templates.html">
        <i class="fas fa-list-ul"></i>
        <span>模板</span>
      </div>
      <div class="tab-item" data-nav="analytics.html">
        <i class="fas fa-chart-pie"></i>
        <span>统计</span>
      </div>
      <div class="tab-item" data-nav="community.html">
        <i class="fas fa-users"></i>
        <span>社区</span>
      </div>
      <div class="tab-item" data-nav="profile.html">
        <i class="fas fa-user"></i>
        <span>我的</span>
      </div>
    </div>
  </div>

  <style>
    /* Habit detail specific styles */
    .flex-1 {
      flex: 1;
    }
  </style>
  
  <script src="js/app.js"></script>
</body>
</html>
